<template>
  <div class="product-choose">
    <el-table
      :data="productList"
      style="width: 100%;">
      <template v-for="(field, index) in fieldList">
        <el-table-column
          :key="index"
          :prop="field.prop"
          :label="field.label"
          show-overflow-tooltip />
      </template>
      <el-table-column label="实际数量">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.actualNumber"
            :controls="false"
            :precision="2"
            :min="0"
            placeholder="请输入"
            @change="actualNumberChange(scope)" />
        </template>
      </el-table-column>
      <el-table-column label="盈亏数量">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.lossNumber"
            :controls="false"
            :precision="2"
            disabled
            placeholder="" />
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.remarks"
            :maxlength="100"
            placeholder="请输入"
            @change="totalPriceChange" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click.stop="removeItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/6/10
 */
import { jxcWarehouseProductQueryListAPI } from '@/api/jxc/storage'

// import JxcTypes from '../../../jxcTypes'
import { objDeepCopy } from '@/utils'

export default {
  name: 'OutboundChoose',
  props: {
    relativeData: {
      type: Object,
      default: () => {}
    },
    defaultValue: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showPopover: false,

      fieldList: [
        { label: '产品名称', prop: 'productName', width: null },
        { label: '产品规格', prop: 'spDataValue', width: null },
        { label: '产品单位', prop: 'productCompany', width: null },
        { label: '账面数量', prop: 'remainingQuantity', width: null }
      ],
      productList: []
    }
  },
  watch: {
    defaultValue: {
      handler(val) {
        if (val.length > 0) {
          this.productList = objDeepCopy(val)
        }
      },
      deep: true,
      immediate: true
    },
    relativeData: {
      handler(val) {
        this.productList = []
        if (!val) return
        this.getProductList()
      },
      deep: true
    }
  },
  methods: {
    getProductList() {
      if (!this.relativeData ||
        !this.relativeData.productType ||
        !this.relativeData.warehouseId) return

      jxcWarehouseProductQueryListAPI({
        pageType: 0,
        productType: this.relativeData.productType,
        warehouseId: this.relativeData.warehouseId
        // stock: '1'
      }).then(res => {
        this.productList = res.data.map(o => {
          return {
            ...o,
            actualNumber: o.remainingQuantity,
            lossNumber: 0,
            remarks: ''
          }
        })
        this.totalPriceChange()
      }).catch(() => {})
    },

    actualNumberChange(scope) {
      const row = scope.row
      row.lossNumber = row.actualNumber - row.remainingQuantity
      this.totalPriceChange()
    },

    removeItem(index) {
      this.productList.splice(index, 1)
      this.totalPriceChange()
    },

    totalPriceChange() {
      this.$emit('change', {
        data: this.productList,
        total: 0
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "index";
</style>
